<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import * as echarts from 'echarts';

const BarECharts = ref(null)

const newData = reactive([
  {
    "name": "产值异常",
    "value": 43
  },
  {
    "name": "企业应缴税金异常",
    "value": 48
  },
  {
    "name": "利润额异常",
    "value": 79
  },
  {
    "name": "销售额异常",
    "value": 44
  },
  {
    "name": "用电量异常",
    "value": 37
  },
  {
    "name": "期末员工异常",
    "value": 28
  },
  {
    "name": "订单量变化异常",
    "value": 169
  }
])



onMounted(() => {

  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        type: "scroll",
        orient: 'vertical',
        right: '100',
        align: 'left',
        top: 'middle',
        data: newData,
        textStyle: {
          color: '#8C8C8C'
        },
      },
      series: [
        {
          type: 'pie',
          center: ['30%', '50%'],
          radius: ['40%', '60%'],
          avoidLabelOverlap: false,
          label: {
            show: true,
            fontSize: 16,
            position: 'center',
            formatter:(e)=>{
              return  '{total|' + e.value + '家}\n{active|' + e.name + '}'
            },
            rich: {
              total: {
                fontSize: 22,
                fontWeight:'bold',
                fontFamily: "微软雅黑",
                color: '#2167fa'
              },
              active: {
                fontFamily: "微软雅黑",
                fontSize: 16,
                color: '#6c7a89',
                lineHeight: 30,
              }
            }
          },
          emphasis: {
            label: {
              show: false,
              fontSize: 16,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: newData
        }
      ]
    };
    Echarts.setOption(option);

    window.onresize = Echarts.resize
  }
})


</script>

<style lang="less" scoped>
</style>
